.merak-aside {
  display: flex;
  flex-direction: column;
}

.type_name {
  display: flex;
  align-items: top;
  justify-content: start;
  font-size: 16px;
  height: 34px;
}

.template_wrap {
  display: flex;
  justify-content: start;
  gap: 130px;
  flex: 1;
  height: 100%;
  min-height: 0px;
  padding-left: 80px;

  .data_tags {
    display: flex;
    flex-direction: column;
    width: 360px;

    // flex: 1;
    .title {
      position: relative;
      padding: 10px 0px;
      align-items: center;
      text-align: left;

      .step_1 {
        display: flex;
        align-items: center;
        justify-content: center;
        grid-area: icon;
        position: absolute;
        left: -28px;
        top: 6px;
        width: 28px;
        height: 28px;
        transform: translateX(-10px);
        border: 1px solid var(--el-color-primary);
        color: var(--el-color-primary);
        border-radius: 50%;
        font-size: 16px;
        user-select: none;
      }

      h5 {
        grid-area: h5;
        margin: 0px;
        font-size: 16px;
        color: var(--el-color-primary);
        font-weight: 400;
      }

      .sub_title {
        grid-area: sub_title;
        margin-top: 4px;
        color: #82848f;
        font-size: 12px;
      }
    }

    .el-scrollbar {
      padding: 0px 15px;
      margin: 0px -15px;
    }
  }

  .draggble_wrap {
    display: flex;
    flex-direction: column;
    width: 340px;

    .title {
      position: relative;
      padding: 10px 0px;
      align-items: center;
      text-align: left;

      .step_1 {
        display: flex;
        align-items: center;
        justify-content: center;
        grid-area: icon;
        position: absolute;
        left: -28px;
        top: 6px;
        width: 28px;
        height: 28px;
        transform: translateX(-10px);
        border: 1px solid var(--el-color-primary);
        color: var(--el-color-primary);
        border-radius: 50%;
        font-size: 16px;
        user-select: none;
      }

      h5 {
        grid-area: h5;
        margin: 0px;
        font-size: 16px;
        color: var(--el-color-primary);
        font-weight: 400;
      }

      .sub_title {
        margin-top: 4px;
        grid-area: sub_title;
        color: #82848f;
        font-size: 12px;
      }
    }

    .body {
      display: flex;
      flex: 1;
      flex-direction: column;
      height: 100%;
      // max-height: 85%;
      min-height: 0px;
      padding: 20px 20px 0px;
      border: 1px solid #e6e6ee;
      background: #f8f9fa;

      .scroll_body {
        flex: 1;
        padding: 0px 15px 0px;
        margin: 0px -15px;
      }

      .footer {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70px;
      }
    }
  }

  .data_tags,
  .draggble_wrap {
    padding: 0px 15px 15px;
    border-radius: 5px;
    // border: 1px solid #fef5f5;
  }
}

.tree-wrapper {
  flex: 1;
  min-height: 0;
}

.cur_type_name {
  padding: 0px 0px 10px;
  font-size: 16px;
}

:deep(.el-tree--highlight-current) {
  .el-tree-node.is-current>.el-tree-node__content {
    background-color: var(--el-color-primary);

    .el-tree-node__label,
    .el-tree-node__expand-icon {
      color: white;
    }

    .is-leaf {
      color: transparent;
    }
  }
}

:deep(.merakTree.noThree .el-tree-node.is-current .el-tree-node__content) {
  background-color: #fff !important;
}

:deep(.merakTree.noThree.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .el-tree-node__expand-icon) {
  color: var(--el-tree-expand-icon-color) !important;
}

:deep(.merakTree.noThree.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .el-tree-node__label) {
  color: var(--el-tree-text-color) !important;
}